<template>
  <div class="echart-property">
    <OptionCollapse active="">
      <el-collapse-item
        v-if="hasProp('gridFolder')"
        :title="$demoi18n('echart.setting.component')"
        name="gridFolder"
      >
        <Grid
          v-if="hasProp('grid')"
          :form="form"
        />
        <GridSankey
          v-if="hasProp('grid-sankey')"
          :form="form"
        />
        <GridRelationship
          v-if="hasProp('grid-relationship')"
          :form="form"
        />
        <GridTreemap
          v-if="hasProp('grid-treemap')"
          :form="form"
        />
        <EchartPropertyPopup
          v-if="hasProp('splitLine')"
          :form="form"
          component="splitLine/splitLine"
          :title="$demoi18n('echart.setting.separatorLine')"
        />
        <EchartPropertyPopup
          v-if="hasProp('markLineArea')"
          :form="form"
          component="series/markLineArea"
          :title="$demoi18n('echart.setting.reference')"
          width="1000px"
        />
        <slot name="compSetting"></slot>
      </el-collapse-item>
      <slot name="customOptions"></slot>
      <slot name="customItems"></slot>
      <el-collapse-item
        v-if="hasProp('shapeFolder')"
        :title="$demoi18n('echart.setting.shape')"
        name="shapeFolder"
      >
        <Shape
          v-if="hasProp('shape')"
          :form="form"
          :config="config"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('series-label_folder')"
        :title="$demoi18n('echart.setting.dataLabel')"
        name="series-label_folder"
      >
        <SeriesLabelRooter
          v-if="hasProp('series-label')"
          :form="form"
        />
        <SeriesLabelPie
          v-if="hasProp('series-label-pie')"
          :form="form"
        />
        <SeriesLabelSankey
          v-if="hasProp('series-label-sankey')"
          :form="form"
        />
        <SeriesLabelRadar
          v-if="hasProp('series-label-radar')"
          :form="form"
        />
        <SeriesLabelTree
          v-if="hasProp('series-label-tree')"
          :form="form"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('xAxisFolder')"
        :title="$demoi18n('echart.setting.xAxis')"
        name="xAxisFolder"
      >
        <xAxis
          v-if="hasProp('xAxis')"
          :form="form"
        />
        <EchartPropertyPopup
          v-if="hasProp('xAxis-name')"
          :form="form"
          component="xAxis/xAxis-name"
          :title="$demoi18n('echart.setting.xAxisName')"
        />
        <EchartPropertyPopup
          v-if="hasProp('xAxis-axisLabel')"
          :form="form"
          component="xAxis/xAxis-axisLabel"
          :title="$demoi18n('echart.setting.xAxisScaleLabel')"
        />
        <EchartPropertyPopup
          v-if="hasProp('xAxis-axisTick')"
          :form="form"
          component="xAxis/xAxis-axisTick"
          :title="$demoi18n('echart.setting.xAxisScale')"
        />
        <EchartPropertyPopup
          v-if="hasProp('xAxis-axisLine')"
          :form="form"
          component="xAxis/xAxis-axisLine"
          :title="$demoi18n('echart.setting.xAxisAxis')"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('yAxisFolder')"
        :title="$demoi18n('echart.setting.yAxis')"
        name="yAxisFolder"
      >
        <yAxis
          v-if="!yAxisArr.length"
          :form="form"
        />
        <el-tabs
          v-else
          v-model="activeYAxisTab"
          class="echart_tabs"
        >
          <el-tab-pane
            v-for="(n, i) in yAxisArr"
            :key="i"
            :label="n._tabName"
            :name="`yAxis_${i}`"
          >
            <yAxis
              :form="form"
              :index="i"
            />
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('dataZoomFolder')"
        :title="$demoi18n('echart.setting.dataZoom')"
        name="dataZoomFolder"
      >
        <dataZoomSlider
          v-if="hasProp('dataZoom-slider')"
          :form="form"
        />
        <EchartPropertyPopup
          v-if="hasProp('dataZoom-inside') && !isVisualH5"
          :form="form"
          component="dataZoom/dataZoom-inside"
          :title="$demoi18n('echart.setting.dataZoomInside')"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('shared-action_folder')"
        :title="$demoi18n('echart.settings.syncOpration')"
      >
        <SharedAction
          v-if="hasProp('shared-action')"
          :form="form"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('debounceSettings') && !isVisualH5"
        :title="$demoi18n('echart.debounceSettings')"
      >
        <FormItem
          :form="form"
          option="isDebounce"
          :label="$demoi18n('echart.isDebounce')"
          type="switch"
        />
        <FormItem
          v-show="form.isDebounce"
          :form="form"
          option="debounceTime"
          :label="$demoi18n('echart.debounceTime')"
          type="number"
        />
      </el-collapse-item>
      <el-collapse-item
        v-if="hasProp('noDataPromptSetting')"
        name="cssStyle.noDataPrompt"
      >
        <template #title>
          <slot name="title">
            <span>{{ $demoi18n('message.noDataPrompt') }}</span>
            <Helptip>{{ $demoi18n('message.noDataPromptTip') }}</Helptip>
          </slot>
        </template>
        <VsFormItem
          class="noDataPromptType"
        >
          <div>
            <el-radio v-model="form.noDataPromptType" label="defaultPrompt">{{ $demoi18n('message.defaultSystemPrompt') }}</el-radio><br />
            <el-radio v-model="form.noDataPromptType" label="noPrompt">{{ $demoi18n('message.noPrompt') }}</el-radio><br />
            <el-radio v-model="form.noDataPromptType" label="customPrompt">{{ $demoi18n('message.customPrompts') }}</el-radio>
          </div>
        </VsFormItem>
        <VsFormItem
          v-if="form.noDataPromptType === 'customPrompt'"
          class="noDataPrompt"
          prop="noDataPrompt"
          :rules="genNoDataPromptRules()"
        >
          <el-input
            v-model="form.noDataPrompt"
            :placeholder="$demoi18n('message.pleaseEnterACustomPrompt')"
            type="textarea"
            maxlength="20"
            show-word-limit
          ></el-input>
        </VsFormItem>
      </el-collapse-item>
    </OptionCollapse>
  </div>
</template>
<script>
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import Grid from './grid/grid.vue';
import GridSankey from './grid/grid-sankey.vue';
import GridRelationship from './grid/grid-relationship.vue';
import GridTreemap from './grid/grid-treemap.vue';
import SeriesLabelSankey from '@/components/common/echart/series/label/label-sankey.vue';
import xAxis from './xAxis/xAxis.vue';
import yAxis from './yAxis/yAxis.vue';
import Shape from './shape/shape.vue';
import SeriesLabelRooter from '@/components/common/echart/series/series-label-rooter.vue';
import dataZoomSlider from './dataZoom/dataZoom-slider.vue';
import EchartPropertyPopup from './echart-property-popup';
import echartUtil from '@/components/common/echart/echart-util.js';
import { getFlatObj } from '@/utils/util';
import EchartCommonMixin from './mixins/echart-common-mixin.js';
import SeriesLabelPie from '@/components/common/echart/series/label/label-pie.vue';
import SharedAction from '@/components/common/echart/shared-action/shared-action.vue';
import panelsConf from '@/components/common/echart/echart-panels-config.js';
import SeriesLabelRadar from '@/components/common/echart/series/label/label-radar.vue';
import SeriesLabelTree from '@/components/common/echart/series/label/label-tree.vue'; // 关系图
import FormItem from '@/components/common/echart/form-item.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import { genNoDataPromptRules } from '@/utils/rules';

export default {
  components: {
    OptionCollapse,
    Grid,
    GridSankey,
    GridRelationship,
    GridTreemap,
    SeriesLabelSankey,
    Shape,
    xAxis,
    yAxis,
    SeriesLabelRooter,
    dataZoomSlider,
    EchartPropertyPopup,
    SeriesLabelPie,
    SharedAction,
    SeriesLabelRadar,
    SeriesLabelTree,
    FormItem,
    Helptip,
  },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
    config: Object,
    echartConf: {
      type: Object,
      default: () => ({
        _componentName: '',
        dfVals: {},
      }),
    },
    panelsConf: Object, // 替换配置，覆盖默认配置用
  },
  data() {
    return {
      activeYAxisTab: 'yAxis_0',
    };
  },
  computed: {
    yAxisArr() {
      const { yAxis: _yAxis } = this.echartConf;
      if (Array.isArray(_yAxis)) {
        return _yAxis;
      }
      return [];
    },
    hasMarkLineArea() {
      if (this.echartConf._hasMarkLineArea === false) {
        return false;
      }
      return this.echartConf._hasXyAxis;
    },
    hasSeriesLabel() {
      if (this.echartConf._hasSeriesLabel === false) {
        return false;
      }
      return this.echartConf._hasXyAxis;
    },
  },
  watch: {
    'form.componentStyle'(componentStyle) {
      echartUtil.changeFormByCompStyle(this.form.echart, componentStyle, '', null, 'echart');
    },
    'form.echart.dataZoom.slider.show'(isShow) {
      if (isShow) {
        this.form.echart.dataZoom.slider.orient = 'horizontal';
        this.form.echart.dataZoom.inside.orient = 'horizontal';
      }
    },
    'form.echart.dataZoom.inside.orient'(orient) {
      if (orient !== 'horizontal') {
        this.form.echart.dataZoom.slider.show = false;
      }
    },
  },
  created() {
    this.initDfVals();
  },
  methods: {
    genNoDataPromptRules,
    initDfVals() {
      Object.entries(this.echartConf).map(([i]) => {
        const n = this.echartConf[i];
        if (i === 'dfVals') {
          for (const j in n) {
            if (typeof n[j] !== 'undefined') {
              echartUtil.registerVar(j, this.form, this, n[j]);
            }
          }
        } else {
          const vals = getFlatObj(n, `echart.${i}`);
          Object.entries(vals).map(([j]) => {
            echartUtil.registerVar(j, this.form, this, vals[j]);
          });
        }
      });
    },

    // 组件配置面板是否出现某属性配置菜单
    hasProp(key) {
      const { _componentName } = this.form.echart;
      let conf = panelsConf[_componentName] || {};
      if (this.panelsConf) {
        conf = { ...conf, ...this.panelsConf };
      }
      return conf[key];
    },
  },
};
</script>
<style lang="less" scoped>
@import './less/echart-common.less';
.echart-property {
  .noDataPromptType {
    margin-left: 15px;
  }
  .noDataPrompt {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
